<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :data-grid-title="dataGridTitle"
      :render-form-title="renderFormTitle"
      :columns="columns"
      :init-load="false"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label"><span class="required">角色名称</span></td>
              <td>
                <el-form-item
                  prop="roleName"
                  :rules="[
                    {
                      required: true,
                      message: '请填写角色名称!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.roleName" placeholder="请输入角色名称..."></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span class="required">排序号</span></td>
              <td>
                <el-form-item prop="sortNo" :rules="[]">
                  <el-input-number v-model="formData.sortNo"></el-input-number>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label"><span>角色介绍</span></td>
              <td :colspan="3">
                <el-form-item prop="roleMemo">
                  <el-input v-model="formData.roleMemo" maxlength="250" placeholder="请输入角色介绍信息..." show-word-limit type="textarea" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label"><span>权限分配</span></td>
              <td :colspan="3">
                <el-table :data="authList" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id" default-expand-all>
                  <el-table-column prop="menuName" label="菜单（页面）" width="300" />
                  <el-table-column prop="menuCheck" label="选中" width="120">
                    <template #default="scope">
                      <el-checkbox v-model="scope.row.d"></el-checkbox>
                    </template>
                  </el-table-column>

                  <el-table-column prop="func" label="功能">
                    <template #default="scope">
                      <el-checkbox-group v-model="scope.row.b">
                        <el-checkbox value="Online activities" name="type"> 新增 </el-checkbox>
                        <el-checkbox value="Promotion activities" name="type"> 修改 </el-checkbox>
                        <el-checkbox value="Offline activities" name="type"> 删除 </el-checkbox>
                        <el-checkbox value="Simple brand exposure" name="type"> 批量删除 </el-checkbox>
                      </el-checkbox-group>
                    </template>
                  </el-table-column>
                  <el-table-column prop="State" label="权限" width="120">
                    <template #default="scope">
                      <el-checkbox v-model="scope.row.a"></el-checkbox>
                    </template>
                  </el-table-column>
                </el-table>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IColumn, IGetPageHttpConfig, IGetInfoHttpConfig, IAddInfoHttpConfig, IUpdateInfoHttpConfig, IDelInfoHttpConfig, IDelListHttpConfig } from '@/types/menu-datagrid-form';
import type { IRole } from './role';
defineOptions({
  name: 'SysRole',
});
const formData = ref<IRole>({
  id: '',
  roleName: '',
  roleMemo: '',
});
const authList = [
  {
    id: '01',
    menuName: '工作台',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    id: '02',
    menuName: '应用中心',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    id: '03',
    menuName: '建模工具',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    children: [
      {
        id: '0301',
        menuName: '建模工具',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
      },
    ],
  },
];
const dataGridTitle = '角色列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IRole) => {
  if (stateValue === 'add') {
    return '角色信息';
  } else {
    return data.roleName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'roleName',
    label: '角色名称',
    width: 200,
    align: 'left',
  },
  {
    prop: 'roleMemo',
    label: '角色说明',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/role/#{id}',
  delInfoMsgEmphasize: '#{roleName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/role/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IRole> = {
  url: '/admin-api/sys/role/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IRole> = {
  url: '/admin-api/sys/role/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IRole> = {
  url: '/admin-api/sys/role',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IRole> = {
  url: '/admin-api/sys/role',
};
</script>
<style lang="scss" scoped></style>
